<template>
  <table-data :allList="allList">
    <template slot="thead">
      <th v-for="item in header" :key="item.prop"><div class="cell" v-once>{{item.name}}</div></th>
    </template>
    <template slot="tbody" slot-scope="slotProps">
      <template v-if="type === 'queue'">
        <tr-queue  v-for="(one, index) in slotProps.current" :key="index" :one="dataList[one]" :header="header"></tr-queue>
      </template>
      <template v-if="type === 'queueIm'">
        <tr-queue-im  v-for="(one, index) in slotProps.current" :key="index" :one="dataList[one]" :header="header"></tr-queue-im>
      </template>
      <template v-if="type === 'common'">
        <tr-common  v-for="(one, index) in slotProps.current" :key="index" :one="dataList[one]" :header="header"></tr-common>
      </template>
    </template>
  </table-data>
</template>
<script>
  import tableData from './tableWrap'
  import trQueue from './TrQueue'
  import trQueueIm from './TrQueueIm'
  import trCommon from './TrCommon'

  export default {
    name: 'callData',
    data () {
      return {
      }
    },
    props: {
      allList: {
        type: Array,
        default: function () {
          return []
        }
      },
      header: {
        type: Array,
        default: function () {
          return []
        }
      },
      dataList: {
        type: Object,
        default: function () {
          return {}
        }
      },
      type: {
        type: String,
        default: ''
      }
    },
    computed: {
    },
    components: {
      tableData,
      trQueue,
      trQueueIm,
      trCommon
    },
    inject: ['phoneQueues', 'init'],
    methods: {
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  /*@import '../../../assets/common.styl';*/
  .wrap
    padding 10px 16px 20px
  .data
    padding 10px
</style>
